<template>
  <div class="root">
    <m-header v-bind:title="title" hasIconBorder :yellowbg="isYellowBg">
      <div slot="left" v-on:click="exitProgram"><img class="m-icon-img margin-right-10" src="../assets/images/menu_close.png" /></div>
    </m-header>

    <div class="content">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>

    <m-tabbar v-model="tabIndex">
      <m-tabbar-item id="photowall" isRouter>
        <img src="../assets/images/tab_pic_unselect.png" alt="" slot="icon-normal" />
        <img src="../assets/images/tab_pic_select.png" alt="" slot="icon-active" /> 最美
      </m-tabbar-item>

      <m-tabbar-item id="arsocial" isRouter>
        <img src="../assets/images/tab_ar_unselect.png" alt="" slot="icon-normal" />
        <img src="../assets/images/tab_ar_select.png" alt="" slot="icon-active" /> AR交友
      </m-tabbar-item>

      <m-tabbar-item id="personalcenter" isRouter>
        <img src="../assets/images/tab_center_unselect.png" alt="" slot="icon-normal" />
        <img src="../assets/images/tab_center_select.png" alt="" slot="icon-active" /> 个人中心
      </m-tabbar-item>
    </m-tabbar>
  </div>
</template>

<script>
  import mTabbar from '../components/tabbar'
  import mTabbarItem from '../components/tabbar-item'
  import mHeader from '../components/header.vue'

  import {
    mapActions
  } from 'vuex'
  import {
    SET_MY_INFO
  } from '../store/myInfo'

  export default {
    name: 'home',
    components: {
      mTabbar,
      mTabbarItem,
      mHeader
    },
    data() {
      return {}
    },
    computed: {
      title() {
        return this.$store.state.headerTitle;
      },

      isYellowBg() {
        return this.$store.state.yellowHeaderBg;
      },

      tabIndex() {
        return this.$store.state.tabIndex;
      }

    },
    methods: {
      ...mapActions([SET_MY_INFO]),
      getMyData() {
        var _this = this;
        this.$http.get('my/info').then(function (response) {
          if (response.data.code === '0') {
            _this.SET_MY_INFO(response.data.data.my);
          }
          console.log(_this.$store.state.myInfo);
        }).catch(function (error) {});
      },

      exitProgram() {
        console.log('exitProgram');
        var url = 'jsbridge://exitProgram';
        var iframe = document.createElement('iframe');
        iframe.style.width = '1px';
        iframe.style.height = '1px';
        iframe.style.display = 'none';
        iframe.src = url;
        document.body.appendChild(iframe);
        setTimeout(function () {
          iframe.remove();
        }, 100);
      }
    },
    mounted() {
      this.getMyData();
    }
  }

</script>

<style lang="less">
  /*@import '../assets/less/common.less';*/

</style>
